<template>
  <view class="card-page">
    <!-- 自定义导航栏 -->
    <CustomNavBar title="我的停车卡" />
    
    <!-- 标签页切换 -->
    <view class="tab-container">
      <view 
        class="tab-item" 
        :class="{ active: activeTab === 'purchased' }"
        @click="switchTab('purchased')"
      >
        已购卡
      </view>
      <view 
        class="tab-item" 
        :class="{ active: activeTab === 'list' }"
        @click="switchTab('list')"
      >
        卡包列表
      </view>
    </view>
    
    <!-- 已购卡内容 -->
    <view v-if="activeTab === 'purchased'" class="content-container">
      <view v-if="purchasedCards.length > 0" class="card-list">
        <view 
          v-for="card in purchasedCards" 
          :key="card.id" 
          class="card-item"
        >
          <view class="card-header">
            <view class="card-type-icon" :class="card.type">
              {{ card.type === '0' ? '月' : '天' }}
            </view>
            <view class="card-number">{{ card.plate }}</view>
            <view class="card-status" @click.stop="renewCard(card)">
              {{ card.status === 0 ? '有效' : card.status === 1 ? '失效' : '待生效' }}
            </view>
          </view>
          
          <view class="card-location">{{ card.parkName }}</view>
          
          <view class="card-validity">
            有效期至{{ new Date(card.expireTime).getFullYear() }}-{{ String(new Date(card.expireTime).getMonth() + 1).padStart(2, '0') }}-{{ String(new Date(card.expireTime).getDate()).padStart(2, '0') }}
          </view>
        </view>
      </view>
      
      <view v-else class="empty-state">
        <text>暂无已购停车卡</text>
      </view>
    </view>
    
    <!-- 卡包列表内容 -->
    <!-- <view v-if="activeTab === 'list'" class="content-container">
      <view class="card-list">
        <view 
          v-for="card in availableCards" 
          :key="card.id" 
          class="card-package-item"
          @click="selectCard(card)"
        >
          <image 
            :src="card.image" 
            class="card-image" 
            mode="aspectFit"
          />
          <view class="card-package-info">
            <view class="package-title">{{ card.title }}</view>
            <view class="package-description">{{ card.description }}</view>
            <view class="package-price">¥{{ card.price }}</view>
          </view>
        </view>
      </view>
    </view> -->


    <view v-if="activeTab === 'list'" class="content-container">
      <view  class="card-list">
        <view 
          v-for="card in availableCards" 
          :key="card.id" 
          class="card-item"
           @click="selectCard(card)"
        >
          <view class="card-header">
            <view class="card-type-icon" :class="card.type">
              {{ card.type === '0' ? '月' : '天' }}
            </view>
			<view class="little-money">¥</view>
            <view class="card-number">{{ parseFloat(card.amount).toFixed(2) }}</view>
            <view class="card-status">{{ card.status }}</view>
			<view class="card-status" @click.stop="goToBuyCard(card)">购买</view>
          </view>
          
          <view class="card-location">{{ card.parkName }}</view>
          
          <view class="card-validity">
            有效期时长{{ card.validity }}天
          </view>
        </view>
      </view>
      
      <!-- <view v-else class="empty-state">
        <text>暂无已购停车卡</text>
      </view> -->
    </view>
    <!-- 底部邀请按钮 -->
    <view  v-if="activeTab === 'purchased'" class="bottom-action">
      <view class="invite-button" @click="inviteFriends">
        <view class="invite-text-main">邀请送月卡时长</view>
        <view class="invite-text-sub">可送一个月</view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import CustomNavBar from '@/components/CustomNavBar.vue'
import MyApi from '@/api/my/my.js'



// 响应式数据
const activeTab = ref('purchased') // 'purchased' 或 'list'
const purchasedCards = ref([]);
const availableCards = ref([]);
// const purchasedCards = ref([
//   {
//     id: 1,
//     type: 'month',
//     number: '皖A·00000',
//     status: '续费',
//     location: '城西银泰停车场',
//     validUntil: '2025-10-31'
//   },
//   {
//     id: 2,
//     type: 'day',
//     number: '皖A·00000',
//     status: '续费',
//     location: '城西银泰停车场',
//     validUntil: '2025-10-31'
//   }
// ])

// const availableCards = ref([
//   {
//     id: 1,
//     title: '月卡套餐',
//     price: '299.00',
//     status: '购买',
//     location: '城西银泰停车场',
//     validUntil: '2025-10-31',
//     type: 'month'
//   },
//   {
//     id: 2,
//     title: '月卡套餐',
//     price: '29.00',
//     status: '购买',
//     location: '城西银泰停车场',
//     validUntil: '2025-10-31',
//     type: 'month'
//   }
// ])
onShow(async () => {
  purchasedCards.value = await MyApi.getPurchasedCards();
  availableCards.value = await MyApi.getParkCards();
  // console.log(await MyApi.getPurchasedCards())
  console.log('已购卡：', purchasedCards.value[0])
  console.log('可购卡：', availableCards.value)
})
// 方法
// 切换标签页
const switchTab = (tab) => {
  activeTab.value = tab
}

// 选择卡片
const selectCard = (card) => {
  console.log('选择卡片:', card)
  // 这里可以跳转到购买页面或显示详情
  uni.navigateTo({
    url: '/pages/card/renew'
  })
}

// 邀请好友
const inviteFriends = () => {
  console.log('邀请好友')
  uni.showToast({
    title: '邀请功能开发中',
    icon: 'none'
  })
}

const goToBuyCard = (card) => {
	if (card.isOnline === 1) {
		uni.showToast({
			title: '此卡仅限线下购买',
			icon: 'none'
		})
		return
	}
	// 将卡片数据通过URL参数传递到renew页面
	const cardData = encodeURIComponent(JSON.stringify(card))
	uni.navigateTo({
		url: `/pages/card/renew?cardData=${cardData}`
	})
}

// 续费卡片
const renewCard = (card) => {
  console.log('续费卡片:', card)
  uni.navigateTo({
    url: '/pages/card/renew'
  })
}
</script>

<style scoped>
.card-page {
  min-height: 100vh;
  background-color: #ffffff;
  padding-bottom: 120rpx;
}

/* 标签页样式 */
.tab-container {
  display: flex;
  background-color: #ffffff;
  /* margin: 0 32rpx; */
  /* margin-top: 15rpx; */
  border-radius: 12rpx;
  padding: 8rpx 32rpx 0 32rpx;
  position: relative;
  border-bottom: 1rpx solid #EBEBEB;
}

.tab-item {
  flex: 1;
  text-align: center;
  padding: 24rpx 0;
  font-size: 30rpx;
  color: #000000;
  /* border-radius: 8rpx; */
  transition: all 0.3s ease;
}

.tab-item.active {
  /* color: #00D4AA;
  background-color: #f0fffe; */
  font-weight: 500;
  border-bottom: 2rpx solid #00D4AA;
}

/* 内容容器 */
.content-container {
  padding: 32rpx;
}
.little-money {
  margin: 10rpx 5rpx 0 0;
}
/* 已购卡样式 */
.card-list {
  display: flex;
  flex-direction: column;
  gap: 24rpx;
}

.card-item {
  background: linear-gradient(to bottom, #fff, #E8F8F6 );
  border-radius: 16rpx;
  padding: 32rpx;
  height:215rpx;
  border: 1rpx solid #EBEBEB;
  /* box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05); */
}

.card-header {
  display: flex;
  align-items: center;
  margin-bottom: 16rpx;
}

.card-type-icon {
  width: 90rpx;
  height: 90rpx;
  /* border-radius: 8rpx; */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 35rpx;
  font-weight: normal;
  /* color: #ffffff; */
  margin-right: 16rpx;
  border: #1BCCB4 1px solid;
  border-radius: 20rpx;
  color: #7A7A7C;
}

.card-type-icon.month {
    background-image: url('https://tg-spcs.oss-cn-hangzhou.aliyuncs.com/static/images/card/month.png');
    background-size: cover;
    background-position: center;

  /* background-color: #00D4AA; */
}

.card-type-icon.day {
    background-image: url('https://tg-spcs.oss-cn-hangzhou.aliyuncs.com/static/images/card/day.png');
    background-size: cover;
    background-position: center;
}

.card-number {
  /* font-size: 32rpx; */
  font-size: 20pt;
  font-weight: 600;
  color: #333333;
  flex: 1;
}

.card-status {
  /* background-color: #00D4AA; */
  color: #00D4AA;
  padding: 8rpx 16rpx;
  border-radius: 20rpx;
  font-size: 32rpx;
  font-weight: 600;
}

.card-location {
  font-size: 32rpx;
  color: #333333;
  margin-bottom: 12rpx;
  padding-top: 15rpx;
}

.card-validity {
  font-size: 24rpx;
  color: #999999;
  padding-top: 5rpx;
}

/* 卡包列表样式 */
.card-package-item {
  /* background-color: #ffffff; */
  background: linear-gradient(to bottom, #fff, #E8F8F6 );
  border-radius: 16rpx;
  padding: 32rpx;
  margin-bottom: 24rpx;
  display: flex;
  align-items: center;
  height:215rpx;
  border: 1rpx solid #EBEBEB;
  /* box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05); */
}

.card-image {
  width: 120rpx;
  height: 80rpx;
  margin-right: 24rpx;
  border-radius: 8rpx;
}

.card-package-info {
  flex: 1;
}

.package-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333333;
  margin-bottom: 8rpx;
}

.package-description {
  font-size: 24rpx;
  color: #999999;
  margin-bottom: 12rpx;
}

.package-price {
  font-size: 36rpx;
  font-weight: 600;
  color: #00D4AA;
}

/* 空状态 */
.empty-state {
  text-align: center;
  padding: 120rpx 0;
  color: #999999;
  font-size: 28rpx;
}

/* 底部邀请按钮 */
.bottom-action {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 24rpx 32rpx;
  background-color: #ffffff;
  /* border-top: 1rpx solid #f0f0f0; */
}

.invite-button {
  background: linear-gradient(135deg, #FF6B35, #FF8A00);
  border-radius: 60rpx;
  padding: 20rpx;
  text-align: center;
  color: #ffffff;
}

.invite-text-main {
  font-size: 32rpx;
  font-weight: 600;
  margin-bottom: 4rpx;
}

.invite-text-sub {
  font-size: 24rpx;
  opacity: 0.9;
}
</style>